import Vue from 'vue'
import Component from 'vue-class-component'
import ConditionListClass from '@/components/conditionList.js'
import './shareStyle.css'

@Component
export default class FilterTermClass extends Vue {
  topTitle = String
  items = []
  type = ''

  created() {
    this.topTitle = this.$route.params.title
    this.items = this.$route.params.items
    this.type = this.$route.params.type
  }

  beforeUpdate () {
    this.topTitle = this.$route.params.title
    this.items = this.$route.params.items
    this.type = this.$route.params.type
  }

  // 选中筛选条件
  handlerSelectFilter(value) {
    if (this.type === 'photo') {
      this.$store.dispatch('selectFilterItem', value)
    } else if (this.type === 'product') {
      this.$store.dispatch('selectProductFilterItem', value)
    } else if (this.type === 'copyProduct') {
      this.$store.dispatch('selectCopyProductFilterItem', value)
    } else if (this.type === 'storeProduct') {
      this.$store.dispatch('selectStoreProductFilterItem', value)
    }
  }

  handleSure () {
    if (this.type === 'photo') {
      // this.$router.beforeEach((to, from, next) => {
      //   if (to.name === 'photos' && from.name === 'filterTerm') {
      //     to.query.temp = 'request'
      //   }
      //   next()
      // })
      // this.$router.push({name: 'photos'})

      eventBus.$emit('filterForPhoto', 'refresh')
    } else if (this.type === 'product') {
      // this.$router.beforeEach((to, from, next) => {
      //   if (to.name === 'productColumn' && from.name === 'filterTerm') {
      //     to.query.temp = 'product'
      //   }
      //   next()
      // })
      // this.$router.push({name: 'productColumn'})
      eventBus.$emit('filterForProduct', 'refresh')
    } else if (this.type === 'copyProduct') {
      // this.$router.beforeEach((to, from, next) => {
      //   if (to.name === 'productColumn' && from.name === 'filterTerm') {
      //     to.query.temp = 'product'
      //   }
      //   next()
      // })
      // this.$router.push({name: 'productColumn'})
      eventBus.$emit('filterForCopyProduct', 'refresh')
    } else if (this.type === 'storeProduct') {
      // this.$router.beforeEach((to, from, next) => {
      //   if (to.name === 'storeProducts' && from.name === 'filterTerm') {
      //     to.query.temp = 'storeProduct'
      //   }
      //   next()
      // })
      // this.$router.push({name: 'storeProducts'})
      eventBus.$emit('filterForStoreProduct', 'refresh')
    }
    this.$router.go(-1)
  }

  handleClear (value) {
    if (this.type === 'photo') {
      for (var i = 0; i < value.length; i++) {
        let item = value[i]
        if (item.checked) {
          this.$store.dispatch('selectFilterItem', item)
          item.checked = false
        }
      }
    } else if (this.type === 'product') {
      for (var i = 0; i < value.length; i++) {
        let item = value[i]
        if (item.checked) {
          this.$store.dispatch('selectProductFilterItem', item)
          item.checked = false
        }
      }
    } else if (this.type === 'copyProduct') {
      alert('cancel')
      for (var i = 0; i < value.length; i++) {
        let item = value[i]
        if (item.checked) {
          this.$store.dispatch('selectCopyProductFilterItem', item)
          item.checked = false
        }
      }
    } else if (this.type === 'storeProduct') {
      for (var i = 0; i < value.length; i++) {
        let item = value[i]
        if (item.checked) {
          this.$store.dispatch('selectStoreProductFilterItem', item)
          item.checked = false
        }
      }
    }
  }

  render () {
    return (
      <div class='content'>
        <mt-header class="header" title={this.topTitle}>
            <mt-button icon="back" slot='left' onClick={() => { this.$router.go(-1) }}></mt-button>
        </mt-header>

        <ConditionListClass items={this.items} onClearItem={value => this.handleClear(value)} onSure={this.handleSure} onSelected={value => this.handlerSelectFilter(value)}> </ConditionListClass>

      </div>
    )
  }
}
